<app-header-main #header></app-header-main>
<div class="banner">
  <div class="title">
    {{ 'first.title' | translate}}
  </div>
  <div class="para">
    {{ 'first.introduction' | translate}}
  </div>
</div>
<div class="sp-panel">
  <div class="ch-panel border" (click)="header.goSolution()">
    <div class="container-flex">
      <div class="first-icon icon-example">
      </div>
      <div style="width:100%;text-align: left;line-height: heightValue;">
        <div class="title-ch-panel">
          {{ 'example' | translate}}
        </div>
      </div>
      
    </div>
    <hr class="hr-dashed">
    <div class="para-ch-panel">
      {{ 'first.introductionExample' | translate}}
    </div>
  </div>
  <div class="ch-panel border" (click)="header.goMain()">
    <div class="container-flex">
      <div class="first-icon icon-arrange">
      </div>
      <div style="width:100%;text-align: left;line-height: heightValue;">
        <div class="title-ch-panel">
          {{ 'arrange' | translate}}
        </div>
      </div>
    </div>
    <hr class="hr-dashed">
    <div class="para-ch-panel">
      {{ 'first.introductionGraph' | translate}}
    </div>
  </div>
  <div class="ch-panel border" (click)="header.goManagement()">
    <div class="container-flex">
      <div class="first-icon icon-task">
      </div>
      <div style="width:100%;text-align: left;line-height: heightValue;">
        <div class="title-ch-panel">
          {{ 'task' | translate}}
        </div>
      </div>
    </div>
    <hr class="hr-dashed">
    <div class="para-ch-panel">
      {{ 'first.introductionTask' | translate}}
    </div>
  </div>
</div>
